<template>

  <!-- 内层盒子 -->
  <div class="inner-container">
    <!-- 搜索框组件 -->
    <div id="app">
      <SearchBox/>
    </div>
    <!-- 健康信息分类组件 -->
    <div id="app">
      <HealthInfoCategories/>
    </div>
    <!-- 大众健康和生活手册分类组件 -->
    <div id="app">
      <HealthInfoHopeCategory/>
    </div>
    <!-- 医院科室分类组件 -->
    <div id="app">
      <HospitalDepartments/>
    </div>
    <!-- 常见问题列表组件 -->
    <div id="app">
      <FAQList/>
    </div>
  </div>
  <!-- 底部组件 -->
  <div id="app">
    <Footer/>
  </div>
</template>

<script setup>
import SearchBox from '../components/SearchBox.vue';
import HealthInfoCategories from '../components/HealthInfoCategories.vue';
import HealthInfoHopeCategory from '../components/HealthInfoHopeCategory.vue';
import HospitalDepartments from '../components/HospitalDepartments.vue';
import FAQList from '../components/FAQList.vue';
import Footer from '../components/Footer.vue'
</script>

<style scoped>


.inner-container {

  width: 90%; /* 容器宽度 */
  max-width: 2000px; /* 最大宽度 */
  margin: 20px auto; /* 居中 */
  padding: 10px;
  background-color: #f2f3f5; /* 背景颜色 */
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 2px 12px rgba(221, 221, 221, 0.1); /* 阴影效果 */
}

</style>
